<template>
  <div class="index-list-edit-right-box">
    <div class="index-list-edit-right-box-title">编辑</div>
    <component :is="current" v-if="current != ''"></component>
  </div>
</template>

<script>
import { mapState } from "vuex";
import topedit from "@/components/page/module/module_right/top_edit";
import deliverytopedit from "@/components/page/module/module_right/delivery_top_edit";
import slidesedit from "@/components/page/module/module_right/slides_edit";
import menuedit from "@/components/page/module/module_right/menu_edit";
import banneredit from "@/components/page/module/module_right/banner_edit";
import textedit from "@/components/page/module/module_right/text_edit";
import productedit from "@/components/page/module/module_right/product_edit";
import newsedit from "@/components/page/module/module_right/news_edit";
import spikeedit from "@/components/page/module/module_right/spike_edit";
import supplieredit from "@/components/page/module/module_right/supplier_edit";
import footeredit from "@/components/page/module/module_right/footer_edit";
import cityinfoedit from "@/components/page/module/module_right/cityinfo_edit";
import taskedit from "@/components/page/module/module_right/task_edit";
import hoteledit from "@/components/page/module/module_right/hotel_edit";
import planeedit from "@/components/page/module/module_right/plane_edit";
import dfy_hoteledit from "@/components/page/module/module_right/dfy_hotel_edit";

export default {
  data() {
    return {};
  },
  components: {
    topedit,
    deliverytopedit,
    slidesedit,
    menuedit,
    banneredit,
    textedit,
    productedit,
    newsedit,
    spikeedit,
    supplieredit,
    footeredit,
    cityinfoedit,
    taskedit,
    hoteledit,
    planeedit,
    dfy_hoteledit,
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      active: (state) => state.modulePage.active,
    }),
    current() {
      var active = this.active;
      console.log(active);
      // if (active == "slides" && this.pageObj.tuanzhang == 1) {
      //   active = "deliverytop";
      // }
      return active == "" ? "" : active + "edit";
      // if (this.active.indexOf("-") >= 0) {
      //     active = this.active.split("-")[0];
      // }
      // if (this.active == "slides") {
      //     return str + "top";
      // } else if (this.active == "top") {
      //     return str + "head";
      // } else if (active == "nav") {
      //     return str + "menu";
      // } else if (
      //     active == "product" ||
      //     active == "spike" ||
      //     active == "presale" ||
      //     active == "group" ||
      //     active == "knowledge" ||
      //     active == "supplier"
      // ) {
      //     return str + "shop";
      // } else {
      //     return str + this.active;
      // }
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less">
.index-list-edit-right-box {
  padding: 0px 8px 4px;
  background: #fff;
  height: 100%;
  .index-list-edit-right-box-title {
    height: 40px;
    text-align: left;
    color: #3998fc;
    font-size: 18px;
    line-height: 40px;
  }
}

.notTurnUp {
  color: #ddd;
  cursor: not-allowed;
}
.del-advertiseme {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 22px;
  display: none;
  cursor: pointer;
}
.banner-box {
  background: #f0f0f0;
  padding: 20px 0 10px;
  margin-bottom: 10px;
}
.image-card-wrap:hover .del-advertiseme {
  display: block;
}
.common-sjh-image-list-card .image-card-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #f9f9f9;
  margin: 10px 0 0 0px;
  padding: 20px 0 20px 10px;
  // height: 102px;

  .image-card-move {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    > i {
      font-size: 18px;
    }
  }
  .image-card-cell {
    display: flex;
    flex-direction: row;
    // height: 62px;
    .image-input-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 24px 0 15px;
      .wt-link-comp {
        padding-top: 15px;
        .add-btn {
          margin-left: 5px;
          font-size: 14px;
          color: #3998fc;
          cursor: pointer;
        }
      }
    }
  }
}
.sjh-image-editor {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wt-link-comp-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .link-detail-wrapper {
    display: inline-block;
    flex: 1;
    .link-detail {
      padding: 0;
      background: #f9f9f9;
      align-items: center;
      display: block;
      width: 100%;
      .link-detail-url {
        width: 100%;
        flex: 1;
        margin-right: 10px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 14px;
        font-size: 12px;
        margin-bottom: 10px;
      }
      .link-detail-editor {
        display: inline-block;
        flex-shrink: 0;
        margin: auto 0;
        width: 75px;
        .btns {
          font-size: 12px;
          display: inline-block;
          color: #3998fc;
          cursor: pointer;
          padding-left: 0;
        }
      }
    }
  }
}
.moduleedit {
  .el-form-item__content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.xzshop {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  .xzshopitem {
    // width: 25%;
    margin-bottom: 10px;
    position: relative;
  }
  .xzshopitem:hover .dele_banner {
    display: inline;
  }
  .dele_banner {
    display: none;
    top: 0px;
    right: 3px;
    font-size: 22px;
    i {
      color: red;
    }
  }
}
.sel_img_btn-shop {
  width: 100px;
}

.sortshop_box {
  width: 100px;
  height: 20px;
  > div {
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
  }
}
.xzshopitem:hover .sortshop_box > div {
  display: flex;
  cursor: pointer;
}
</style>
